<template>
    <div class="detail_info">
        <!-- 头部菜单部分 -->
        <div class="detail_top_manu"><topManu></topManu></div>

        <!-- 多个卡片 -->
        <div class="detaile_card">
          <div class="detaile_card_left">
            <singleCard :cssStyle="{padding:'10px',height:'70px'}"></singleCard>
          </div>

          <!-- 获取文章列表 -->
          <div class="detaile_card_right">
            <articleList></articleList>            
          </div>
        </div>

    </div>
</template>

<script>
import topManu from "./topManu";
import articleList from "./articleList";
import singleCard from "./card";

export default {
  name: "detailInfo",
  data() {
    return {
    };
  },
  components: {
    topManu,
    articleList,
    singleCard
  },
  
};
</script>

<style lang="scss" scoped>
.detail_info {
  height: 100%;
  display: flex;
  flex-direction: column;
  .detail_top_manu {
    background-color: black;
    max-width: 100%;
    height: 60px;
  }
  .detaile_card {
    width: 1024px;
    flex: 1;
    margin: 0 auto;
    display: flex;
    &_left{
      height: 100%;
      width: 18%;
      border-right: solid 1px #e6e6e6;
    }
    &_right{
      flex: 1;
      padding: 20px;
    }
  }
}
</style>

